<template>
  <div id="echarts5"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb7.png" />
                 {{ variable_name1 }}数据
                 <!-- <el-form ref="form" :model="form" label-width="80px">  
                    <el-form-item label="" label-width="0px" style="margin-left:10px;margin-bottom:0px !important;">
                    <el-date-picker :picker-options="pickerOptions" disabled  
                     type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time"  style="width:150px;"></el-date-picker>
                    </el-form-item>
                  </el-form> -->
             </div>
             <div class="top_item" >
                 <div class="see_but" @click="go_but()">查看详情</div>
             </div>
            
         </div>
         <div class="box">
             <div class="top_item" style="justify-content: flex-end;">
                 <div class="top_item_but" :class="select_id==1 ? 'active1' : ''" @click="select_but(1)">当月</div>
                 <div class="top_item_but" :class="select_id==2 ? 'active1' : ''"  @click="select_but(2)">当周</div>
             </div>
              <div style="width:100%;height:250px;padding-top:70px;display:flex;">
                  <div style="width:200px;">
                       <div class="item_a" style="padding-top:0px;">
                            <div class="item_b">
                                <div class="item_b_1">持有数</div>
                                <div class="item_b_2">{{ list_data.all_count }}</div>
                            </div>
                        </div>
                  </div>
                    <!-- <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">总数</div>
                          <div class="item_b_2">{{ list_data.all_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1" style="display:flex;align-items: center;justify-content: center;">派发数
                              <img  @click="table_but()" style="width:18px;height:18px;" src="@/assets/images/wh.png" />
                          </div>
                          <div class="item_b_2">{{ list_data.sended_count }}</div>
                      </div>
                  </div>
                  <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">消耗数</div>
                          <div class="item_b_2">{{ list_data.used_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">赠送数</div>
                          <div class="item_b_2">{{ list_data.give_count }}</div>
                      </div>
                  </div> -->
                  <div style="flex:1;">
                        <div class="item_a" style="border-left:1px solid #E5E5E5;padding-top:0px;">
                            <div class="item_b">
                                <div class="item_b_1">消耗数</div>
                                <div class="item_b_2">{{ list_data.used_count }}</div>
                            </div>
                            <div class="item_b">
                                <div class="item_b_1">兑出数</div>
                                <div class="item_b_2">{{ list_data.exchange_count }}</div>
                            </div>  
                        </div>
                        <div class="item_a" style="border-left:1px solid #E5E5E5;">
                            <div class="item_b">
                                <div class="item_b_1" style="display:flex;align-items: center;justify-content: center;">派发数
                                    <img  @click="table_but()" style="width:18px;height:18px;" src="@/assets/images/wh.png" />
                                </div>
                                <div class="item_b_2">{{ list_data.sended_count }}</div>
                            </div>
                            <div class="item_b">
                                <div class="item_b_1">赠出数</div>
                                <div class="item_b_2">{{ list_data.give_count }}</div>
                            </div>
                        </div>
                  </div>
                  
              </div>
            
         </div>
   </div>

   <el-dialog title='派发数' :visible.sync="mtk_table"  width="700px">
            <div style="width:100%;"> 
                
            <el-form ref="form"  label-width="80px">  
                <el-row> 
                    <el-col :span="20" style="display:flex;">
                        <el-form-item label="" label-width="0px">
                            <el-select @change="select_change"   v-model="mtk_table_form.select_num" placeholder="请选择状态" style="width:160px;">
                                <el-option  v-for="(item,index) in mtk_table_form.select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4" style="text-align: right;">  
                        <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;">总数：{{ count }}</el-button>            
                    </el-col>       
                </el-row>  
            </el-form>

             <el-table :data="mtk_table_form.datalist" style="width: 100%" height="500px" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                 <el-table-column label="帐号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.num }}</span>
                    </template>
                </el-table-column>
            </el-table> 

             <div style="margin-top:20px;text-align: center;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="10"  
                    layout="prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </div>

            </div> 
        </el-dialog>

</div>
</template>

<script>

export default {
   name: 'echarts1',
  data () {
    return {
         pickerOptions: { // 计费日期的约束条件
          disabledDate(time) {
            return time.getTime() < new Date('2021-02-03').getTime()
            }
        },
        page:1,
        count:0,
        list_data:{},
        form:{
            time:''
        },
        mtk_table:false,
        mtk_table_form:{
            select_num:3,
            select_data:[{"id":3,"name":"运营中心"},{"id":1,"name":"0号线"},{"id":2,"name":"2号线"}],
            datalist:[{"name":"123123"}]
        },
        select_id:2,
        type:2,  //type  1-当月  2-当周
    }
  },
   components:{

  },
  created(){
     this.form.time = this.getNowDate1()
     this.list_fun()
     this.table_fun()
  },
  mounted (){
     
  },
  methods: {
        list_fun(){
    
         this.post("/whole/kmbData", {
             type:this.type,
             onetime:this.form.time
	        }).then(res => {
                this.list_data = res.result
                //console.log(res.result,"tttta")
            })
       },
        table_but(){
            this.mtk_table = true
        },
        table_fun(){
             this.post("/whole/sendKmbDetail", {
              page:this.page,
              type:this.mtk_table_form.select_num
	        }).then(res => {
            this.count = res.result.count
            this.mtk_table_form.datalist = res.result.list   
            //console.log(res,"tyu")
         })
        },
        select_change(){
           this.page = 1
           this.table_fun()
          // console.log("123")
        },
        select_but(index){
         this.select_id = index
         
          if(index == 1){         
              this.type = 1
              this.list_fun()
          }else if(index == 2){
              this.type = 2
              this.list_fun()
          }
        },
        go_but(){
            this.$router.push({
                path: '/index/operationdata/population/detailsEcharts5',
                query: {
                    name:'果米数据',
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val
            this.table_fun()
            console.log(`当前页: ${val}`);
        }


  }
}
</script>


<style scoped>
.con{
   padding:15px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.top_item_but{
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-radius:3px;
    color:#18A4F5;   
    background: #E5F0FA;  
    box-shadow: 0px 4px 9px 0px rgba(24, 164, 245, 0.5);
    cursor: pointer;
}
.active1{
    background: #18A4F5;
    color:white;
}
.box{
    padding: 10px;
    border-radius: 10px;    
    box-shadow: 0px 4px 9px 0px rgba(254, 206, 77, 0.1);
    margin-top: 20px;
}
.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
.item_a{
  display:flex;
  padding:0px 15px;
  padding-top: 20px;
}
.item_b{
  flex: 1;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
</style>